/**
 * 语言列表组件
 */

import React from 'react';
import { List, Card, Typography, Space, Tag, Button, Tooltip, Checkbox } from 'antd';
import { DownloadOutlined, FileTextOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import { themeConfig } from '../../theme/themeConfig';
import { LanguageFile } from '../../types';

const { Title, Text } = Typography;

const StyledCard = styled(Card)`
  .ant-card-body {
    padding: 24px;
  }
`;

const LanguageItem = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid ${themeConfig.colors.border};
  
  &:last-child {
    border-bottom: none;
  }
`;

const LanguageInfo = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
`;

const LanguageName = styled.div`
  display: flex;
  flex-direction: column;
  gap: 4px;
`;

const LanguageCode = styled(Tag)`
  margin: 0;
  font-size: 12px;
  border-radius: 4px;
`;

const FileInfo = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  color: ${themeConfig.colors.textSecondary};
  font-size: 12px;
`;

const ActionButtons = styled.div`
  display: flex;
  gap: 8px;
`;

interface LanguageListProps {
  files: LanguageFile[];
  onDownloadFile: (file: LanguageFile) => void;
  onDownloadAll: () => void;
  onDownloadSelected?: () => void;
  onSelectLanguage?: (languageCode: string, checked: boolean) => void;
  onSelectAll?: (checked: boolean) => void;
  selectedLanguages?: string[];
  selectAll?: boolean;
  conflicts?: any[];
  missingTranslations?: any[];
}

const LanguageList: React.FC<LanguageListProps> = ({
  files,
  onDownloadFile,
  onDownloadAll,
  onDownloadSelected,
  onSelectLanguage,
  onSelectAll,
  selectedLanguages = [],
  selectAll = false,
  conflicts = [],
  missingTranslations = []
}) => {
  const getLanguageName = (code: string): string => {
    const languageNames: Record<string, string> = {
      'zh': '中文',
      'en': 'English',
      'ar': 'العربية',
      'cs': 'Čeština',
      'da': 'Dansk',
      'de': 'Deutsch',
      'el': 'Ελληνικά',
      'es': 'Español',
      'fa': 'فارسی',
      'fi': 'Suomi',
      'fr': 'Français',
      'ga': 'Gaeilge',
      'he': 'עברית',
      'hr': 'Hrvatski',
      'hu': 'Magyar',
      'it': 'Italiano',
      'ja': '日本語',
      'ko': '한국어',
      'nb': 'Norsk',
      'pl': 'Polski',
      'pt': 'Português',
      'ro': 'Română',
      'ru': 'Русский',
      'sk': 'Slovenčina',
      'sv': 'Svenska',
      'th': 'ไทย',
      'tr': 'Türkçe',
      'uk': 'Українська',
      'vi': 'Tiếng Việt'
    };
    return languageNames[code] || code.toUpperCase();
  };

  const getLanguageStatus = (code: string) => {
    const hasConflicts = conflicts.some(conflict => conflict.language === code);
    const hasMissing = missingTranslations.some(missing => missing.language === code);
    
    if (hasConflicts) {
      return { status: 'error', icon: <ExclamationCircleOutlined />, text: '有冲突' };
    } else if (hasMissing) {
      return { status: 'warning', icon: <ExclamationCircleOutlined />, text: '有缺失' };
    } else {
      return { status: 'success', icon: <CheckCircleOutlined />, text: '正常' };
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'error': return themeConfig.colors.error;
      case 'warning': return themeConfig.colors.warning;
      case 'success': return themeConfig.colors.success;
      default: return themeConfig.colors.textSecondary;
    }
  };

  return (
    <StyledCard>
      <div style={{ marginBottom: 16 }}>
        <Title level={4} style={{ margin: 0, color: themeConfig.colors.text }}>
          生成的语言文件
        </Title>
        <Text type="secondary" style={{ fontSize: 14 }}>
          共生成 {files.length} 个语言文件
        </Text>
      </div>

      {/* 选择功能 */}
      {onSelectLanguage && onSelectAll && (
        <div style={{ 
          marginBottom: 16, 
          padding: 12, 
          backgroundColor: themeConfig.colors.backgroundLight,
          borderRadius: themeConfig.borderRadius.small,
          border: `1px solid ${themeConfig.colors.border}`
        }}>
          <Space>
            <Checkbox
              checked={selectAll}
              onChange={(e) => onSelectAll(e.target.checked)}
            >
              全选
            </Checkbox>
            <Text type="secondary">
              已选择 {selectedLanguages.length} / {files.length} 个语言
            </Text>
            {onDownloadSelected && selectedLanguages.length > 0 && (
              <Button
                type="primary"
                size="small"
                icon={<DownloadOutlined />}
                onClick={onDownloadSelected}
                style={{
                  backgroundColor: themeConfig.colors.primary,
                  borderColor: themeConfig.colors.primary,
                }}
              >
                下载选中 ({selectedLanguages.length})
              </Button>
            )}
          </Space>
        </div>
      )}

      <List
        dataSource={files}
        renderItem={(file) => {
          const status = getLanguageStatus(file.language);
          const languageName = getLanguageName(file.language);
          
          return (
            <List.Item style={{ padding: 0 }}>
              <LanguageItem>
                <LanguageInfo>
                  {onSelectLanguage && (
                    <Checkbox
                      checked={selectedLanguages.includes(file.language)}
                      onChange={(e) => onSelectLanguage(file.language, e.target.checked)}
                    />
                  )}
                  <FileTextOutlined style={{ color: themeConfig.colors.primary, fontSize: 16 }} />
                  <LanguageName>
                    <div style={{ fontWeight: 500, color: themeConfig.colors.text }}>
                      {languageName}
                    </div>
                    <FileInfo>
                      <LanguageCode color={themeConfig.colors.primary}>
                        {file.language}
                      </LanguageCode>
                      <span>{Object.keys(file.data).length} 个翻译项</span>
                    </FileInfo>
                  </LanguageName>
                </LanguageInfo>
                
                <Space>
                  <Tooltip title={status.text}>
                    <div style={{ 
                      display: 'flex', 
                      alignItems: 'center', 
                      gap: 4,
                      color: getStatusColor(status.status)
                    }}>
                      {status.icon}
                      <span style={{ fontSize: 12 }}>{status.text}</span>
                    </div>
                  </Tooltip>
                  
                  <ActionButtons>
                    <Button
                      type="text"
                      size="small"
                      icon={<DownloadOutlined />}
                      onClick={() => onDownloadFile(file)}
                      style={{ color: themeConfig.colors.primary }}
                    >
                      下载
                    </Button>
                  </ActionButtons>
                </Space>
              </LanguageItem>
            </List.Item>
          );
        }}
      />

      <div style={{ 
        marginTop: 24, 
        paddingTop: 16, 
        borderTop: `1px solid ${themeConfig.colors.border}`,
        textAlign: 'center'
      }}>
        <Button
          type="primary"
          size="large"
          icon={<DownloadOutlined />}
          onClick={onDownloadAll}
          style={{
            backgroundColor: themeConfig.colors.primary,
            borderColor: themeConfig.colors.primary,
            borderRadius: themeConfig.borderRadius.medium,
            height: 40,
            paddingLeft: 24,
            paddingRight: 24,
            fontWeight: 500
          }}
        >
          下载全部文件 (ZIP)
        </Button>
        <div style={{ 
          marginTop: 8, 
          fontSize: 12, 
          color: themeConfig.colors.textSecondary 
        }}>
          将下载包含所有语言文件的压缩包
        </div>
      </div>
    </StyledCard>
  );
};

export default LanguageList;
